<template>
    <view class=ticket_box>
        <view class="top"></view>
        <view class="nav_box">
            <text class="screening">筛选：</text>
            <text class="all" :class="{active:current===0}" @click="showAll">全部</text>
            <text class="expired" :class="{active:current===1}" @click="showExpired">已过期</text>
            <text class="notExpired" :class="{active:current===2}" @click="showNotExpired">未过期</text>
        </view>
        <view class="info_box">
            <view class="item_box" v-for="(item,index) in ticketInfos">
                <view class="img_box">
                    <image :src="item.exhibitionImage" mode="widthFix"></image>
                </view>
                <view class="singleInfo">
                    <view class="item_name">{{item.exhibitionName}}</view>
                    <view class="item_address">
                        <text>{{item.exhibitionAddress}}</text>
                        <!-- <text>长春市</text>
                        <text>农安区</text> -->
                    </view>
                    <view class="item_isticket">{{item.exhibitionLabels[0].exhibitionLabel}}</view>
                    <view class="item_price"><text class="rmb">￥</text>{{item.exhibitionPrice}}</view>
                    <view class="item_date">
                        <view class="date">{{item.displayTime}}</view>
                        <view class="item_expired">{{item.isOutDate}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,
                ticketInfos: []
            }
        },
        methods: {
            showAll() {
                this.current = 0,
                    this.getAllData()
            },
            showExpired() {
                this.current = 1,
                    this.getExpiredData()
            },
            showNotExpired() {
                this.current = 2,
                    this.getNotExpiredData()
            },

            //请求所有数据
            getAllData() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mybuyticketall', {
                    pageNo: 1,
                    pageTol: 5
                }, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log(res)
                    this.ticketInfos = res.data
                });
            },

            //请求已过期数据
            getExpiredData() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mybuyticketOverdue', {
                    pageNo: 1,
                    pageTol: 5
                }, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log(res)
                    this.ticketInfos = res.data
                });
            },

            //请求未过期数据
            getNotExpiredData() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mybuyticketNotExpired', {
                    pageNo: 1,
                    pageTol: 5
                }, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log(res)
                    this.ticketInfos = res.data
                });
            }
        },

        mounted() {
            this.getAllData()
            this.getExpiredData()
            this.getNotExpiredData()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    .active {
        color: #ff6262 !important;
    }

    .ticket_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .nav_box {
            width: 750rpx;
            height: 61rpx;
            box-sizing: border-box;
            background-color: #ffffff;
            border-bottom: 1rpx solid #e5e5e5;
            padding: 0 21rpx;

            .screening {
                height: 61rpx;
                padding-right: 50rpx;
                font-family: PingFangSC-Medium;
                font-size: 32rpx;
                font-weight:550;
                line-height: 61rpx;
                color: #333333;
            }

            .all {
                height: 61rpx;
                padding-right: 60rpx;
                font-family: PingFangSC-Regular;
                font-size: 32rpx;
                font-weight:550;
                color: #999999;
            }

            .expired {
                height: 61rpx;
                line-height: 61rpx;
                padding-right: 60rpx;
                font-family: PingFangSC-Medium;
                font-size: 32rpx;
                font-weight:550;
                color: #999999;
            }

            .notExpired {
                height: 61rpx;
                line-height: 61rpx;
                font-family: PingFangSC-Medium;
                font-size: 32rpx;
                font-weight:550;
                color: #999999;
            }
        }

        .info_box {
            width: 750rpx;

            .item_box {
                width: 750rpx;
                height: 307rpx;
                background-color: #ffffff;
                border-bottom: 10rpx solid #e5e5e5;
                box-sizing: border-box;
                padding: 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .img_box {
                    width: 202rpx;
                    height: 275rpx;
                    background-color: #55ff00;

                    image {
                        width: 202rpx;
                        height: 275rpx;
                    }
                }

                .singleInfo {
                    width: 492rpx;
                    height: 275rpx;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-content: space-around;

                    .item_name {
                        font-family: PingFangSC-Medium;
                        font-size: 30rpx;
                        line-height: 33rpx;
                        color: #333333;
                    }

                    .item_address {
                        width: 100%;
                        font-family: PingFangSC-Medium;
                        font-size: 26rpx;
                        line-height: 33rpx;
                        color: #666666;

                        text {
                            margin-right: 15rpx;
                        }
                    }

                    .item_isticket {
                        // width: 90rpx;
                        height: 38rpx;
                        border-radius: 6rpx;
                        border: solid 1rpx #fead38;
                        font-family: PingFangSC-Regular;
                        font-size: 22rpx;
                        line-height: 38rpx;
                        text-align: center;
                        padding: 0 5rpx;
                        color: #fead38;
                    }

                    .item_price {
                        width: 100%;
                        height: 28rpx;
                        font-family: PingFangSC-Medium;
                        line-height: 33rpx;
                        font-size: 36rpx;
                        color: #ff6262;

                        .rmb {
                            font-size: 24rpx;
                        }
                    }

                    .item_date {
                        width: 492rpx;
                        height: 33rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .date {
                            font-family: PingFangSC-Regular;
                            font-size: 26rpx;
                            line-height: 33rpx;
                            color: #666666;
                        }

                        .item_expired {
                            font-family: PingFangSC-Medium;
                            font-size: 26rpx;
                            line-height: 48rpx;
                            color: #666666;
                        }
                    }
                }
            }
        }
    }
</style>
